<template>
	<view class="groupBookingBox">
		<view class="selfSupport" >
			<view class="selfSupport_top">
				<text class="activityTitle">限时秒杀</text>
				<view class="introduce">
					<text>已直降28.3元</text>
					<image src="../../../../static/images/groupBookingTemplateHr_selfSupport.png"></image>
					<text>7000+人已抢</text>
				</view>
			</view>
			<view class="selfSupport_content" :style="'height:'+((shareTheBillNum * 50) + 20 + ((shareTheBillNum-1) * 6))+'px'">
				<swiper class="swiperBox" :disable-touch="true" :indicator-dots="false" :autoplay="true" interval="2500" duration="500" vertical="true"
				 circular="true">
					<swiper-item class="swiperItemBox">
						<view class="shareTheBillItem">
							<image src="../../../../static/images/f.png"></image>
							<text class="userName">厨房小学生</text>
							<view class="spellBox">
								<text class="spellBox_tips">无需等待</text>
								<text class="spellBox_Title">直接抢到</text>
							</view>
							<view class="timeBox">
								<text class="timeBox_tips">差你即可抢到</text>
								<text class="timeBox_time">23:41:28</text>
							</view>
						</view>
						<view class="shareTheBillItem">
							<image src="../../../../static/images/f.png"></image>
							<text class="userName">厨房小学生</text>
							<view class="spellBox">
								<text class="spellBox_tips">无需等待</text>
								<text class="spellBox_Title">直接抢到</text>
							</view>
							<view class="timeBox">
								<text class="timeBox_tips">差你即可抢到</text>
								<text class="timeBox_time">23:41:28</text>
							</view>
						</view>
						<view class="shareTheBillItem">
							<image src="../../../../static/images/f.png"></image>
							<text class="userName">厨房小学生</text>
							<view class="spellBox">
								<text class="spellBox_tips">无需等待</text>
								<text class="spellBox_Title">直接抢到</text>
							</view>
							<view class="timeBox">
								<text class="timeBox_tips">差你即可抢到</text>
								<text class="timeBox_time">23:41:28</text>
							</view>
						</view>
					</swiper-item>
					<swiper-item class="swiperItemBox">
						<view class="shareTheBillItem">
							<image src="../../../../static/images/f.png"></image>
							<text class="userName">厨房小学生</text>
							<view class="spellBox">
								<text class="spellBox_tips">无需等待</text>
								<text class="spellBox_Title">直接抢到</text>
							</view>
							<view class="timeBox">
								<text class="timeBox_tips">差你即可抢到</text>
								<text class="timeBox_time">23:41:28</text>
							</view>
						</view>
						<view class="shareTheBillItem">
							<image src="../../../../static/images/f.png"></image>
							<text class="userName">厨房小学生</text>
							<view class="spellBox">
								<text class="spellBox_tips">无需等待</text>
								<text class="spellBox_Title">直接抢到</text>
							</view>
							<view class="timeBox">
								<text class="timeBox_tips">差你即可抢到</text>
								<text class="timeBox_time">23:41:28</text>
							</view>
						</view>
						<view class="shareTheBillItem">
							<image src="../../../../static/images/f.png"></image>
							<text class="userName">厨房小学生</text>
							<view class="spellBox">
								<text class="spellBox_tips">无需等待</text>
								<text class="spellBox_Title">直接抢到</text>
							</view>
							<view class="timeBox">
								<text class="timeBox_tips">差你即可抢到</text>
								<text class="timeBox_time">23:41:28</text>
							</view>
						</view>
					</swiper-item>
				 </swiper>
			</view>
		</view>
		<view class="activity" v-if="false">
			<view class="activity_top">
				<text class="activityTitle">限时秒杀</text>
				<view class="introduce">
					<text>已直降28.3元</text>
					<image src="../../../../static/images/groupBookingTemplateHr_selfSupport.png"></image>
					<text>7000+人已抢</text>
				</view>
			</view>
			<view class="activity_content" :style="'height:'+((shareTheBillNum * 50) + 20 + ((shareTheBillNum-1) * 6))+'px'">
				<swiper class="swiperBox" :disable-touch="true" :indicator-dots="false" :autoplay="true" interval="2500" duration="500" vertical="true"
				 circular="true">
					<swiper-item class="swiperItemBox">
						<view class="shareTheBillItem">
							<image src="../../../../static/images/f.png"></image>
							<text class="userName">厨房小学生</text>
							<view class="spellBox">
								<text class="spellBox_tips">无需等待</text>
								<text class="spellBox_Title">直接抢到</text>
							</view>
							<view class="timeBox">
								<text class="timeBox_tips">差你即可抢到</text>
								<text class="timeBox_time">23:41:28</text>
							</view>
						</view>
						<view class="shareTheBillItem">
							<image src="../../../../static/images/f.png"></image>
							<text class="userName">厨房小学生</text>
							<view class="spellBox">
								<text class="spellBox_tips">无需等待</text>
								<text class="spellBox_Title">直接抢到</text>
							</view>
							<view class="timeBox">
								<text class="timeBox_tips">差你即可抢到</text>
								<text class="timeBox_time">23:41:28</text>
							</view>
						</view>
						<view class="shareTheBillItem">
							<image src="../../../../static/images/f.png"></image>
							<text class="userName">厨房小学生</text>
							<view class="spellBox">
								<text class="spellBox_tips">无需等待</text>
								<text class="spellBox_Title">直接抢到</text>
							</view>
							<view class="timeBox">
								<text class="timeBox_tips">差你即可抢到</text>
								<text class="timeBox_time">23:41:28</text>
							</view>
						</view>
					</swiper-item>
					<swiper-item class="swiperItemBox">
						<view class="shareTheBillItem">
							<image src="../../../../static/images/f.png"></image>
							<text class="userName">厨房小学生</text>
							<view class="spellBox">
								<text class="spellBox_tips">无需等待</text>
								<text class="spellBox_Title">直接抢到</text>
							</view>
							<view class="timeBox">
								<text class="timeBox_tips">差你即可抢到</text>
								<text class="timeBox_time">23:41:28</text>
							</view>
						</view>
						<view class="shareTheBillItem">
							<image src="../../../../static/images/f.png"></image>
							<text class="userName">厨房小学生</text>
							<view class="spellBox">
								<text class="spellBox_tips">无需等待</text>
								<text class="spellBox_Title">直接抢到</text>
							</view>
							<view class="timeBox">
								<text class="timeBox_tips">差你即可抢到</text>
								<text class="timeBox_time">23:41:28</text>
							</view>
						</view>
						<view class="shareTheBillItem">
							<image src="../../../../static/images/f.png"></image>
							<text class="userName">厨房小学生</text>
							<view class="spellBox">
								<text class="spellBox_tips">无需等待</text>
								<text class="spellBox_Title">直接抢到</text>
							</view>
							<view class="timeBox">
								<text class="timeBox_tips">差你即可抢到</text>
								<text class="timeBox_time">23:41:28</text>
							</view>
						</view>
					</swiper-item>
				 </swiper>
			</view>
		</view>
		<view class="basics" v-if="false">
			<view class="basics_top">
				<text class="basics_tips">
					367人在抢，
					<text>参与立即抢到</text>
				</text>
				<image src="../../../../static/images/shq_right.png"></image>
			</view>
			<view class="basics_content" :style="'height:'+((shareTheBillNum * 50) + 10 + ((shareTheBillNum-1) * 6))+'px'">
				<swiper class="swiperBox" :disable-touch="true" :indicator-dots="false" :autoplay="true" interval="2500" duration="500" vertical="true"
				 circular="true">
					<swiper-item class="swiperItemBox">
						<view class="shareTheBillItem">
							<image src="../../../../static/images/f.png"></image>
							<text class="userName">厨房小学生</text>
							<view class="spellBox">
								<text class="spellBox_tips">无需等待</text>
								<text class="spellBox_Title">直接抢到</text>
							</view>
							<view class="timeBox">
								<text class="timeBox_tips">差你即可抢到</text>
								<text class="timeBox_time">23:41:28</text>
							</view>
						</view>
						<view class="shareTheBillItem">
							<image src="../../../../static/images/f.png"></image>
							<text class="userName">厨房小学生</text>
							<view class="spellBox">
								<text class="spellBox_tips">无需等待</text>
								<text class="spellBox_Title">直接抢到</text>
							</view>
							<view class="timeBox">
								<text class="timeBox_tips">差你即可抢到</text>
								<text class="timeBox_time">23:41:28</text>
							</view>
						</view>
						<view class="shareTheBillItem">
							<image src="../../../../static/images/f.png"></image>
							<text class="userName">厨房小学生</text>
							<view class="spellBox">
								<text class="spellBox_tips">无需等待</text>
								<text class="spellBox_Title">直接抢到</text>
							</view>
							<view class="timeBox">
								<text class="timeBox_tips">差你即可抢到</text>
								<text class="timeBox_time">23:41:28</text>
							</view>
						</view>
					</swiper-item>
					<swiper-item class="swiperItemBox">
						<view class="shareTheBillItem">
							<image src="../../../../static/images/f.png"></image>
							<text class="userName">厨房小学生</text>
							<view class="spellBox">
								<text class="spellBox_tips">无需等待</text>
								<text class="spellBox_Title">直接抢到</text>
							</view>
							<view class="timeBox">
								<text class="timeBox_tips">差你即可抢到</text>
								<text class="timeBox_time">23:41:28</text>
							</view>
						</view>
						<view class="shareTheBillItem">
							<image src="../../../../static/images/f.png"></image>
							<text class="userName">厨房小学生</text>
							<view class="spellBox">
								<text class="spellBox_tips">无需等待</text>
								<text class="spellBox_Title">直接抢到</text>
							</view>
							<view class="timeBox">
								<text class="timeBox_tips">差你即可抢到</text>
								<text class="timeBox_time">23:41:28</text>
							</view>
						</view>
						<view class="shareTheBillItem">
							<image src="../../../../static/images/f.png"></image>
							<text class="userName">厨房小学生</text>
							<view class="spellBox">
								<text class="spellBox_tips">无需等待</text>
								<text class="spellBox_Title">直接抢到</text>
							</view>
							<view class="timeBox">
								<text class="timeBox_tips">差你即可抢到</text>
								<text class="timeBox_time">23:41:28</text>
							</view>
						</view>
					</swiper-item>
				 </swiper>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				shareTheBillNum:3
			}
		}
	}
</script>

<style scoped lang="scss">
	@font-face {
	  font-family: 'zhjkh';
	  src: url('../../../../static/fonts/zhjkh.ttf') format('truetype');
	}
	.groupBookingBox{
		width: 100%;
		height: auto;
		padding: 0px 10px 10px 10px;
		float: left;
		background-color: #fff;
		.basics{
			width: 100%;
			height: auto;
			float: left;
			.basics_top{
				width: 100%;
				height: 22px;
				float: left;
				.basics_tips{
					width: auto;
					float: left;
					height: 22px;
					line-height: 22px;
					font-size: 17px;
					color: #454545;
					text-indent: 6px;
					text{
						color:#d0453f;
						font-weight: bold;
						margin-left: 5px;
					}
				}
				image{
					width: 15px;
					height: 15px;
					float: right;
					margin-top: 4.5px;
					margin-right: 2px;
				}
			}
			.basics_content{
				float: left;
				width: 100%;
				height: 126px;
				background-color: #fff;
				border-radius: 5px;
				overflow: hidden;
				.swiperBox{
					width: 100%;
					height: 100%;
					float: left;
					.swiperItemBox{
						width: 100%;
						height: 100%;
						.shareTheBillItem:nth-child(1){
							margin-top: 11px;
						}
						.shareTheBillItem:nth-child(2),.shareTheBillItem:nth-child(3){
							margin-top: 6px;
						}
						.shareTheBillItem{
							width: 100%;
							height: 50px;
							float: left;
							image{
								width: 38px;
								height: 38px;
								float: left;
								margin-left: 6px;
								margin-top: 6px;
								border-radius: 50%;
							}
							.userName{
								width: auto;
								height: 50px;
								float: left;
								margin-left: 6px;
								font-size: 16px;
								line-height: 50px;
								color:rgb(33,33,33);
							}
							.timeBox{
								width: 100px;
								float: right;
								height: 50px;
								margin-right: 6px;
								.timeBox_tips{
									width: 100px;
									text-align: right;
									float: right;
									height: 18px;
									line-height: 18px;
									margin-top: 7px;
									font-size: 14px;
									color:#e53b26;
								}
								.timeBox_time{
									height: 18px;
									line-height: 18px;
									width: auto;
									text-align: right;
									float: right;
									font-size: 14px;
									color: rgb(103,103,103);
								}
							}
							.spellBox{
								width: 86px;
								height: 34px;
								background:#e53b26;
								float: right;
								margin-top: 7px;
								margin-right: 6px;
								border-radius: 5px;
								.spellBox_tips{
									width: auto;
									height: 18px;
									line-height: 18px;
									font-size: 12px;
									padding: 0px 5px;
									background-color: #f9e9d0;
									float: right;
									position: relative;
									border-radius: 6px 6px 6px 0px;
									margin-top: -12px;
									color: #e53b26;
								}
								.spellBox_Title{
									width: 100%;
									height: 34px;
									line-height: 34px;
									text-align: center;
									float: left;
									margin-top: -6px;
									color:#fff;
									font-size: 16px;
								}
							}
						}
					}
				}
			}
		}
		.activity{
			width: 100%;
			height: auto;
			float: left;
			padding: 4px;
			background: #de3a2e;
			border-radius:6px;
			.activity_top{
				width: 95%;
				height: 20px;
				float: left;
				margin-left: 2.5%;
				margin-top: 4px;
				margin-bottom: 8px;
				.activityTitle{
					width: auto;
					height: 20px;
					line-height: 20px;
					float: left;
					font-size: 18px;
					color: #fff;
					padding: 0px 6px;
					font-family: 'zhjkh';
				}
				.introduce{
					width: auto;
					height: 16px;
					line-height: 16px;
					margin-top: 2px;
					border-left: 1rpx solid #fff;
					float: left;
					padding: 0px 6px;
					font-size: 16px; 
					color: #fff;
					text{
						float: left;
					}
					image{
						width: 15px;
						height: 15px;
						float: left;
						margin-left: 10px;
						margin-right: 3px;
					}
				}
			}
			.activity_content{
				float: left;
				width: 100%;
				height: 126px;
				background-color: #fff;
				border-radius: 5px;
				overflow: hidden;
				.swiperBox{
					width: 100%;
					height: 100%;
					float: left;
					.swiperItemBox{
						width: 100%;
						height: 100%;
						.shareTheBillItem:nth-child(1){
							margin-top: 13px;
						}
						.shareTheBillItem:nth-child(2),.shareTheBillItem:nth-child(3){
							margin-top: 6px;
						}
						.shareTheBillItem{
							width: 100%;
							height: 50px;
							float: left;
							image{
								width: 38px;
								height: 38px;
								float: left;
								margin-left: 6px;
								margin-top: 6px;
								border-radius: 50%;
							}
							.userName{
								width: auto;
								height: 50px;
								float: left;
								margin-left: 6px;
								font-size: 16px;
								line-height: 50px;
								color:rgb(33,33,33);
							}
							.timeBox{
								width: 100px;
								float: right;
								height: 50px;
								margin-right: 6px;
								.timeBox_tips{
									width: 100px;
									text-align: right;
									float: right;
									height: 18px;
									line-height: 18px;
									margin-top: 7px;
									font-size: 14px;
									color:#e53b26;
								}
								.timeBox_time{
									height: 18px;
									line-height: 18px;
									width: auto;
									text-align: right;
									float: right;
									font-size: 14px;
									color: rgb(103,103,103);
								}
							}
							.spellBox{
								width: 86px;
								height: 34px;
								background:#e53b26;
								float: right;
								margin-top: 7px;
								margin-right: 6px;
								border-radius: 5px;
								.spellBox_tips{
									width: auto;
									height: 18px;
									line-height: 18px;
									font-size: 12px;
									padding: 0px 5px;
									background-color: #f9e9d0;
									float: right;
									position: relative;
									border-radius: 6px 6px 6px 0px;
									margin-top: -12px;
									color: #e53b26;
								}
								.spellBox_Title{
									width: 100%;
									height: 34px;
									line-height: 34px;
									text-align: center;
									float: left;
									margin-top: -6px;
									color:#fff;
									font-size: 16px;
								}
							}
						}
					}
				}
			}
		}
		.selfSupport{
			width: 100%;
			height: auto;
			float: left;
			padding: 4px;
			background: linear-gradient(to right, rgb(23,12,5) 0%, rgb(61,49,39) 50%,rgb(43,34,14) 100%);
			border-radius:6px;
			.selfSupport_top{
				width: 95%;
				height: 20px;
				float: left;
				margin-left: 2.5%;
				margin-top: 4px;
				margin-bottom: 8px;
				.activityTitle{
					width: auto;
					height: 20px;
					line-height: 20px;
					float: left;
					font-size: 18px;
					color: #f9e9d0;
					padding: 0px 6px;
					font-family: 'zhjkh';
				}
				.introduce{
					width: auto;
					height: 16px;
					line-height: 16px;
					margin-top: 2px;
					border-left: 1rpx solid #f9e9d0;
					float: left;
					padding: 0px 6px;
					font-size: 16px; 
					color: #f9e9d0;
					text{
						float: left;
					}
					image{
						width: 15px;
						height: 15px;
						float: left;
						margin-left: 10px;
						margin-right: 3px;
					}
				}
			}
			.selfSupport_content{
				float: left;
				width: 100%;
				height: 126px;
				background-color: #fff;
				border-radius: 5px;
				overflow: hidden;
				.swiperBox{
					width: 100%;
					height: 100%;
					float: left;
					.swiperItemBox{
						width: 100%;
						height: 100%;
						.shareTheBillItem:nth-child(1){
							margin-top: 13px;
						}
						.shareTheBillItem:nth-child(2),.shareTheBillItem:nth-child(3){
							margin-top: 6px;
						}
						.shareTheBillItem{
							width: 100%;
							height: 50px;
							float: left;
							image{
								width: 38px;
								height: 38px;
								float: left;
								margin-left: 6px;
								margin-top: 6px;
								border-radius: 50%;
							}
							.userName{
								width: auto;
								height: 50px;
								float: left;
								margin-left: 6px;
								font-size: 16px;
								line-height: 50px;
								color:rgb(33,33,33);
							}
							.timeBox{
								width: 100px;
								float: right;
								height: 50px;
								margin-right: 6px;
								.timeBox_tips{
									width: 100px;
									text-align: right;
									float: right;
									height: 18px;
									line-height: 18px;
									margin-top: 7px;
									font-size: 14px;
									color:rgb(23,12,5);
								}
								.timeBox_time{
									height: 18px;
									line-height: 18px;
									width: auto;
									text-align: right;
									float: right;
									font-size: 14px;
									color: rgb(103,103,103);
								}
							}
							.spellBox{
								width: 86px;
								height: 34px;
								background:rgb(61,49,39);
								float: right;
								margin-top: 7px;
								margin-right: 6px;
								border-radius: 5px;
								.spellBox_tips{
									width: auto;
									height: 18px;
									line-height: 18px;
									font-size: 12px;
									padding: 0px 5px;
									background-color: #f9e9d0;
									float: right;
									position: relative;
									border-radius: 6px 6px 6px 0px;
									margin-top: -12px;
									color: rgb(61,49,39);
								}
								.spellBox_Title{
									width: 100%;
									height: 34px;
									line-height: 34px;
									text-align: center;
									float: left;
									margin-top: -6px;
									color:#f9e9d0;
									font-size: 16px;
								}
							}
						}
					}
				}
			}
		}
	}
</style>